<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="box1">1</div>
    <div id="box2">2</div>
</body>
<script src="../jquery.js"></script>
<script>

    // console.log(jQuery)
    // console.log($)
    // console.log($ === jQuery)
    // 函数
    // console.log($)

    // 使用方式：
    //     函数执行
    //     对象访问属性或方法

    // jq实现既能作为函数执行，又能作为对象使用身上方法的实现原理：
    // ;(function(){
    //     var qf = function(){
    //         console.log("执行了函数");
    //         return "执行了函数，得到了返回值"
    //     }
    //     qf.ajax = function(){
    //         console.log("将qf作为对象使用了他身上的ajax方法")
    //     }
    //     window.qf = qf
    // })();
    // console.log(qf)
    // qf();
    // qf.ajax();

    
    // DOM操作(jq的局部方法)
    // $().xxx()

    // 工具类方法(jq的全局方法)
    // $.xxx()

    // 选择器
    // 原生DOM对象
    var obox1 = document.getElementById("box1")
    console.log(obox1)
    // obox1.style.background = "red"
    // obox1.style.border = "solid 2px black"
    // obox1.style.fontSize = "30px"
    $(obox1).css({
        background:"red",
        border:"solid 2px black",
        fontSize:"20px"
    })

    // jq的DOM对象
    var obox2 = $("#box2")
    console.log(obox2)
    // obox2.style.background = "green"
    obox2.css({
        background:"green",
        border:"solid 2px black",
        fontSize:"30px"
    })

    // jq的DOM对象，不能直接使用原生DOM对象的属性或方法
    //     需要解析数组后，才能使用

    // 原生的DOM对象，不能直接使用jqDOM对象的属性或方法
    //     需要转成jq的DOM对象后，才能使用

    // jqDOM转原生DOM
    //     解析数组

    // 原生DOM转jqDOM
    //     $(原生DOM)
</script>
</html>